<template>
  <div>
    <div class="activity-container">
      <div class="title">
        <h1 class="text-3xl font-bold">活动公告</h1>
      </div>
      <div class="nav-ul">
        <div
          class="nav-li"
          v-for="(item, index) in navList"
          :key="index"
          :class="{ active: index == navIndex }"
          @click="navClick(index)"
        >
          <span class="item text-left">
            {{ item }}
          </span>

          <span class="icon">·</span>
        </div>
      </div>
      <div class="detai-box" v-show="isNull">
          <el-empty description="暂无数据"></el-empty>
      </div>
      <div class="detai-box" v-show="!isNull">
        <div class="">
          <h1 class="text-2xl text-left font-bold">{{ navList[navIndex] }}</h1>
        </div>
  
        <div class="content-box" >
          <div
            class="content text-sm"
            v-for="(item, index) in noticeListFilter"
            :key="index"
            @click="toInfo(item.noticeId)"
          >
            <div
              class="notice-state px-2 text-white"
              :class="noticeStateColor[item.noticeState - 1]"
            >
              [寄售公告]
            </div>
            <div class="text text-left">
              {{ item.noticeTitle }}
            </div>

            <div class="time text-gray-400 text-sm">
              <p class="text-sm">{{ item.noticeTime }}</p>
            </div>
          </div>
        </div>

        <div class="button" @click="getMore()">
          <p>查看更多&nbsp; ></p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "",
  data() {
    return {
      isNull:true,
      navList: ["全部", "上新", "合成", "空投", "活动", "系统公告"],
      navIndex: 0,
      noticeList: [],
      noticeListFilter: [],
      noticeNum: 0,
      noticeStateColor: ["green", "origin", "blue", "red", "gray"],
    };
  },
  methods: {
    navClick(index) {
      this.navIndex = index;
      this.noticeNum = 0;
      this.noticeList = [];
      this.getNoticeList(this.navIndex);
    },
    getMore() {
      this.noticeNum += 5;
      this.getNoticeList(this.navIndex);
    },
    getNoticeList(value) {
      console.log(value);
      this.$axios
        .postInfo("/queryNoticeState", { noticeState: value })
        .then((res) => {
          console.log(res);
          let getNoticeList = res.listNotice.slice(
            this.noticeNum,
            this.noticeNum + 5
          );
          this.noticeList = this.noticeList.concat(getNoticeList);
          console.log(this.noticeList);
          if (this.navIndex == 0) {
            this.noticeListFilter = this.noticeList.slice(0);
          } else {
            this.noticeListFilter = this.noticeList.filter((item) => {
              return item.noticeState == this.navIndex;
            });
          }
          console.log(this.noticeListFilter);
          if(this.noticeListFilter.length>0){
            this.isNull=false
          }
        });
    },
    getNoticeListState() {
      this.$axios.postInfo("/findAllNotice").then((res) => {
        console.log(res);
        let getNoticeList = res.listNotice.slice(
          this.noticeNum,
          this.noticeNum + 5
        );
        console.log(this.noticeList);
        console.log(concatList);
        this.noticeList = concatList.slice(0);
        console.log(this.noticeList);
        if (this.navIndex == 0) {
          this.noticeListFilter = this.noticeList.slice(0);
        } else {
          this.noticeListFilter = this.noticeList.filter((item) => {
            return item.noticeState == this.navIndex;
          });
        }
        console.log(this.noticeListFilter);
      });
    },
    toInfo(value) {
      console.log(value);
      this.$router.push({ path: "/notice/detail", query: { noticeId: value } });
    },
  },
  computed: {
    navFilterList() {
      if (this.navIndex == 0) {
        return this.navList;
      } else {
        return this.navList.filter((item) => {
          return item == this.navList[this.navIndex];
        });
      }
    },
  },
  created() {
    this.getNoticeList(this.navIndex);
  },
};
</script>
<style  lang="less" scoped>
.activity-container {
  width: 100%;
  padding-top: 150px;
  padding-bottom: 200px;
  display: flex;
  flex-direction: column;
  align-items: center;

  .title {
    box-shadow: 4px 4px 6px rgb(143, 140, 140);
    @apply rounded-lg;
    background: #2468e57d;
    color: #fff;
    padding: 1rem;
    width: 90%;
    max-width: 1200px;

    position: relative;
  }
  .nav-ul {
    position: relative;
    height: 50px;
    width: 90%;
    max-width: 1200px;
    margin-top: 50px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding-left: 20px;
    box-sizing: border-box;
    font-size: 20px;
    color: gray;

    .nav-li {
      position: relative;
      margin: 0px 0px 0px 10px;
      display: flex;

      span {
        text-indent: 0;
      }

      .icon {
        line-height: 30px;
        color: rgba(128, 128, 128, 0.504);
      }

      .item {
        cursor: pointer;
      }
    }

    .nav-li.active {
      color: #2469e5;

      .item {
        border-bottom: 0.1rem solid #2469e5;
      }
    }
  }

  .detai-box {
    position: relative;
    width: 90%;
    max-width: 1200px;
    margin-top: 50px;
    padding: 1rem;
    background: #fbfbfb;
    @apply rounded-md;
    background: #fff;
    box-shadow: 4px 4px 6px rgb(143, 140, 140);

    .content-box {
      position: relative;
      width: 100%;
      margin-top: 30px;
      padding: 0 2rem;

      // height: 100px;
      .content {
        position: relative;
        margin: 1rem 0;
        padding: 1rem 1rem;
        width: 100%;
        display: flex;
        box-sizing: border-box;
        justify-content: space-between;
        cursor: pointer;

        .notice-state {
          @apply bg-gray-500;
        }

        .green {
          @apply bg-indigo-500;
        }

        .origin {
          @apply bg-yellow-500;
        }

        .blue {
          @apply bg-blue-500;
        }

        .red {
          @apply bg-red-500;
        }

        .gray {
          @apply bg-gray-500;
        }

        .text {
          text-overflow: ellipsis;
          white-space: nowrap;
          overflow: hidden;
          flex: 1;
        }

        .time {
          flex-shrink: 0;
          padding: 0px 10px 0px 10px;
          box-sizing: border-box;
        }
      }

      .content::after {
        content: "";
        width: 100%;
        height: 1px;
        background: rgba(128, 128, 128, 0.44);
        position: absolute;
        bottom: 0%;
        left: 0%;
      }

      .content:hover {
        background: #2468e520;
        color: #2469e5;
      }
    }

    .button {
      position: relative;
      // top: 50%;
      left: 50%;
      transform: translate(-50%);
      margin-top: 50px;
      width: 200px;
      height: 30px;
      color: #2469e5;
      border-radius: 24px;
      border: 1px solid #2469e5;
      line-height: 30px;
      cursor: pointer;
    }

    .button.active {
      background: #2469e5;
      color: #fff;
    }
  }
}
</style>